<template>
  <div class="app-container">
    <div style="margin-bottom: 20px; display: flex; justify-content: flex-end;">
      <el-select v-model="selectedTime" placeholder="选择时间" style="width: 200px; margin-right: 20px;">
        <el-option
          v-for="(time, index) in dates"
          :key="index"
          :label="time"
          :value="time"
        />
      </el-select>
    </div>
    <!-- 分区卡片区域 -->
    <div v-loading="loading">
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col v-for="(zone, index) in zones" :key="index" :span="8">
          <el-card shadow="hover" style="border-radius: 8px; background-color: #f9f9f9;">
            <!-- 标题与需水量 -->
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
              <span style="font-weight: bold; font-size: 16px;color: #339933;">{{ zone.scene }}</span>
              <span style="color: #339933; font-size: 16px; font-weight: bold;">需水量: {{ zone.waterNeed }} m³</span>
            </div>

            <!-- 图像区域（更高） -->
            <div class="image-placeholder" style="height: 200px; background-color: #e6f7e6; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
              {{ zone.name }}
            </div>

            <!-- 指标平铺 -->
            <div class="metrics" style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; gap: 8px;">
              <div style="text-align: center; flex: 1;">
                <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.GNDVI.vegetationnum }}</div>
                <div style="font-size: 12px; color: #666;">GNDVI</div>
              </div>
              <div style="text-align: center; flex: 1;">
                <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.OSAVI.vegetationnum }}</div>
                <div style="font-size: 12px; color: #666;">OSAVI</div>
              </div>
              <div style="text-align: center; flex: 1;">
                <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.NDVI.vegetationnum }}</div>
                <div style="font-size: 12px; color: #666;">NDVI</div>
              </div>
              <div style="text-align: center; flex: 1;">
                <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.NDRE.vegetationnum }}</div>
                <div style="font-size: 12px; color: #666;">NDRE</div>
              </div>
              <div style="text-align: center; flex: 1;">
                <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.LCI.vegetationnum }}</div>
                <div style="font-size: 12px; color: #666;">LCI</div>
              </div>
              <div style="text-align: center; flex: 1;">
                <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.moisture }}%</div>
                <div style="font-size: 12px; color: #666;">土壤湿度</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 灌溉决策详情 -->
      <el-card shadow="hover" style="border-radius: 8px; margin-top: 20px;">
        <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
          <span style="color: #339933; font-weight: bold;">灌溉决策详情</span>
        </div>

        <div style="display: flex; gap: 20px;">
          <!-- 处方图可视化区域 -->
          <div style="flex: 3; height: 300px; background-color: #e6f7e6; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
            处方图可视化区域
          </div>

          <!-- 灌溉量汇总 -->
          <div style="flex: 1; padding: 20px; background-color: #f9f9f9; border-radius: 4px;">
            <div style="font-weight: bold; color: #339933; margin-bottom: 15px;">灌溉量汇总</div>
            <div v-for="(zone, index) in zones" :key="index" style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
              <span style="color: #333; font-size: 14px;">{{ zone.scene }}</span>
              <span style="color: #339933; font-size: 16px; font-weight: bold;">{{ zone.waterNeed }} m³</span>
            </div>
            <div style="border-top: 2px solid #339933; margin-top: 20px; padding-top: 15px; font-weight: bold; color: #339933;">
              总需水量 {{ totalWater }} m³
            </div>
          </div>
        </div>
      </el-card></div>
  </div>
</template>

<script>
import { getAll, getDates } from '@/api/meShyCameraSpectrology'
export default {
  data() {
    return {
      device_id: 'a3a4f9f3985d46c2813d1d2252272f84',
      zones: [],
      dates: [],
      selectedTime: '',
      loading: false
    }
  },
  computed: {
    totalWater() {
      return this.zones.reduce((sum, zone) => sum + parseInt(zone.waterNeed), 0)
    }
  },
  watch: {
    selectedTime(newVal) {
      if (newVal) {
        this.loading = true
        setTimeout(() => {
          this.getAll(newVal).finally(() => {
            this.loading = false
          })
        }, 500)
      }
    }
  },
  mounted() {
    this.getDates() // 先拉取时间列表
  },
  methods: {
    async getDates() {
      const { data } = await getDates({ device_id: this.device_id })
      this.dates = data
      this.selectedTime = this.dates[0]
    },
    async getAll(device_time) {
      const { data } = await getAll({ device_id: this.device_id, device_time })
      this.zones = data
    },
    viewDetail(index) {
      console.log('查看分区', index + 1, '详情')
    },
    executePlan() {
      this.$message.success('灌溉计划已执行！')
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
